<template>
  <div class="trade-order-manage">
    <el-form label-position="left" label-width="90px">
      <el-row :gutter="5">
        <el-col :span="8">
          <el-form-item label="订单号：">
            <el-input v-model="param.orderNumber" placeholder="请选择"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="订单状态：">
            <el-select v-model="param.status" placeholder="请选择">
              <el-option label="全部" value></el-option>
              <el-option
                v-for="(item, key, index) in ORDER_STATUS"
                :key="index"
                :label="item"
                :value="Number(key)"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="search">搜索</el-button>
        </el-col>
      </el-row>
    </el-form>
    <div class="table-action">
      <!-- 模块列表 -->
      <div class="module-btn">
        <el-button
          v-for="(item, index) in moduleList"
          :key="index"
          :type="currentModule === index ? 'primary' : ''"
          @click="currentModule = index"
        >{{item}}</el-button>
      </div>
      <div class="import-btn">
        <el-button type="primary" @click="goDetail(0, 'add')">创建订单</el-button>
        <el-button type="primary" @click="inputOrders">导入订单</el-button>
        <el-button type="primary" @click="outputOrders">导出订单</el-button>
        <el-button type="primary" @click="outputPDF">导出PDF</el-button>
      </div>
    </div>
    <el-table :data="tableList" max-height="520" stripe>
      <!-- 通用字段 -->
      <el-table-column prop="id" label="id" min-width="40"></el-table-column>
      <el-table-column prop="saleNumber" label="销售合同号" min-width="80"></el-table-column>
      <el-table-column prop="receiptNumber" label="发票号" min-width="100"></el-table-column>
      <el-table-column prop="month" label="月份" min-width="30"></el-table-column>
      <!-- 第一个模块 -->
      <template v-if="currentModule === 0">
        <el-table-column prop="shipman" label="船务员" min-width="50"></el-table-column>
        <el-table-column label="装柜日期" min-width="100">
          <span slot-scope="scope">{{moment(scope.row.loadingAt).format('YYYY-MM-DD')}}</span>
        </el-table-column>
        <el-table-column prop="customerService" label="客户专员" min-width="50"></el-table-column>
        <el-table-column prop="CY" label="CY" min-width="50"></el-table-column>
        <el-table-column prop="bargeEtd" label="驳船ETD" min-width="50"></el-table-column>
        <el-table-column label="大船ETD" min-width="100">
          <span slot-scope="scope">{{moment(scope.row.shipEtd).format('YYYY-MM-DD')}}</span>
        </el-table-column>
        <el-table-column prop="ETA" label="ETA" min-width="50"></el-table-column>
        <el-table-column prop="bookingNumber" label="订舱号" min-width="100"></el-table-column>
        <el-table-column prop="customClearanceAt" label="报关放行进度" min-width="50"></el-table-column>
        <el-table-column prop="documentAt" label="单证进度" min-width="50"></el-table-column>
        <el-table-column prop="number" label="数量" min-width="50"></el-table-column>
        <el-table-column prop="cabinetType" label="柜型" min-width="50"></el-table-column>
        <el-table-column prop="shipPort" label="装船港" min-width="50"></el-table-column>
        <el-table-column prop="shipPort" label="船公司" min-width="50"></el-table-column>
        <el-table-column prop="scheduleRemark" label="船期进度备注" min-width="50"></el-table-column>
      </template>
      <!-- 第二个模块 -->
      <template v-if="currentModule === 1">
        <el-table-column prop="cabinetNumber" label="柜号" min-width="50"></el-table-column>
        <el-table-column prop="sealNumber" label="封条号" min-width="50"></el-table-column>
        <el-table-column prop="licensePlate" label="车牌" min-width="50"></el-table-column>
        <el-table-column prop="driverMobile" label="司机电话" min-width="50"></el-table-column>
        <el-table-column prop="localFreightForward" label="本地货代" min-width="50"></el-table-column>
      </template>
      <!-- 第三个模块 -->
      <template v-if="currentModule === 2">
        <el-table-column prop="seaFee" label="海运费" min-width="50"></el-table-column>
        <el-table-column prop="trailerFee" label="拖车费" min-width="50"></el-table-column>
        <el-table-column prop="customClearanceFee" label="报关费" min-width="50"></el-table-column>
        <el-table-column prop="billingFee" label="打单费" min-width="50"></el-table-column>
        <el-table-column prop="changeOrderFee" label="异提费/改单费" min-width="50"></el-table-column>
        <el-table-column prop="arkFee" label="约柜费" min-width="50"></el-table-column>
        <el-table-column prop="scanFee" label="扫描费" min-width="50"></el-table-column>
        <el-table-column prop="arivalFee" label="入仓费" min-width="50"></el-table-column>
        <el-table-column prop="retreat" label="退点" min-width="50"></el-table-column>
        <el-table-column prop="overheadFee" label="高速" min-width="50"></el-table-column>
        <el-table-column prop="otherFee" label="其他费用" min-width="50"></el-table-column>
        <el-table-column prop="totalFee" label="费用合计" min-width="50"></el-table-column>
        <el-table-column prop="originCertificateType" label="产地证类型" min-width="50"></el-table-column>
        <el-table-column prop="originCertificateFee" label="产地证费用" min-width="50"></el-table-column>
      </template>
      <!-- 第四个模块 -->
      <template v-if="currentModule === 3">
        <el-table-column label="收到DN时间" min-width="100">
          <span slot-scope="scope">{{moment(scope.row.receiveDnAt).format('YYYY-MM-DD')}}</span>
        </el-table-column>
        <el-table-column prop="shipPortFee" label="港杂费" min-width="50"></el-table-column>
        <el-table-column prop="money" label="私户/公户/港币/美金" min-width="50"></el-table-column>
        <el-table-column prop="foreignFreightForward" label="外地货代" min-width="50"></el-table-column>
        <el-table-column label="外地港杂付款时间" min-width="100">
          <span slot-scope="scope">{{moment(scope.row.shipPortAt).format('YYYY-MM-DD')}}</span>
        </el-table-column>
        <el-table-column label="付款水单" min-width="100">
          <span slot-scope="scope">{{moment(scope.row.payAt).format('YYYY-MM-DD')}}</span>
        </el-table-column>
        <el-table-column label="提单开船日" min-width="100">
          <span slot-scope="scope">{{moment(scope.row.boatDay).format('YYYY-MM-DD')}}</span>
        </el-table-column>
        <el-table-column label="收到提单" min-width="100">
          <span slot-scope="scope">{{moment(scope.row.ladingAt).format('YYYY-MM-DD')}}</span>
        </el-table-column>
        <el-table-column prop="Cabinet" label="正本/电放/EXW/拼柜" min-width="50"></el-table-column>
        <el-table-column prop="receiveDeliveryNumber" label="提单快递单号" min-width="50"></el-table-column>
        <el-table-column prop="deliveryFee" label="收单快递费用" min-width="50"></el-table-column>
        <el-table-column prop="receiptRemark" label="收单进度备注" min-width="50"></el-table-column>
      </template>
      <!-- 第五个模块 -->
      <template v-if="currentModule === 4">
        <el-table-column prop="billingAt" label="寄单/电放时间" min-width="50"></el-table-column>
        <el-table-column prop="uploadAt" label="议付时间" min-width="50"></el-table-column>
        <el-table-column prop="deliveryNumber" label="寄单单号" min-width="50"></el-table-column>
        <el-table-column prop="deliveryFee" label="寄单费用" min-width="50"></el-table-column>
        <el-table-column prop="payType" label="付款方式" min-width="50"></el-table-column>
        <el-table-column prop="invoicePrice" label="发票金额" min-width="50"></el-table-column>
        <el-table-column prop="creditNumber" label="信用证号码" min-width="50"></el-table-column>
        <el-table-column prop="creditTerm" label="信用证付款条款" min-width="50"></el-table-column>
        <el-table-column prop="term" label="即期/远期" min-width="50"></el-table-column>
      </template>
      <el-table-column label="操作" min-width="80">
        <template slot-scope="scope">
          <div>
            <a class="action" @click="goDetail(scope.row.id, 'edit')">编辑</a>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="tableFoot">
      <div class="paging">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="param.pageNo"
          :page-size="param.pageSize"
          :page-sizes="[10,20,30,40,50,100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
        ></el-pagination>
      </div>
    </div>
    <el-dialog
      width="500px"
      :title="dialogTitle"
      v-if="showAdd"
      :visible.sync="showAdd"
      :lock-scroll="true"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <ImportOrder v-if="alertType === 0" @close="closeAdd" @refreshTable="refresh" />
    </el-dialog>
  </div>
</template>

<script>
import XLSX from "xlsx";
import moment from "moment";
import ImportOrder from "./components/import-order";
export default {
  name: "trade-order-manage",
  components: {
    ImportOrder,
  },
  props: {
    name: {
      type: String
    }
  },
  data() {
    return {
      moment: moment,
      PAY_TYPE: this.$common.PAY_TYPE,
      ORDER_STATUS: this.$common.ORDER_STATUS,
      currentModule: 0, // 当前选中的模块下标
      moduleList: ["船期进度", "柜子资料", "费用", "收单进度", "寄单进度"],
      editForm: {},
      tableList: [],
      dialogTitle: '',
      alertType: 0, //0通过excel批量导入订单，1导出PDF
      param: {
        pageNo: 1,
        pageSize: 10,
        orderNumber: ""
      },
      total: 0,
      showAdd: false
    };
  },
  computed: {},
  methods: {
    outputPDF() { 
      // 导出功能暂时隐藏
      return
      this.dialogTitle = '导出PDF';
      this.alertType = 1;
      this.showAdd = true;
    },
    inputOrders() {
      this.dialogTitle = '从excel导入';
      this.alertType = 0;
      this.showAdd = true;
    },
    outputOrders() {
      // 导出订单数据
      let tableList = JSON.parse(JSON.stringify(this.tableList));
      tableList.unshift({}); // 头部增加一行空白行
      let ws = XLSX.utils.json_to_sheet(tableList);
      let wb = XLSX.utils.book_new(); // 工作簿
      XLSX.utils.sheet_add_aoa(ws, [this.$common.EXCEL_TITLE_CNY], {
        origin: 0
      }); // 修改第一行标题
      XLSX.utils.sheet_add_aoa(ws, [this.$common.EXCEL_TITLE_ENG], {
        origin: 1
      }); // 修改第二行标题
      XLSX.utils.book_append_sheet(wb, ws, "SheetJS");
      XLSX.writeFile(wb, "out.xlsx");
    },
    refresh() {
      this.getTableData();
      this.showAdd = false;
    },
    closeAdd() {
      this.showAdd = false;
    },
    goDetail(id, type) {
      this.$router.push({ path: `/tradeforeign/itemdetail/${type}/${id}` });
    },
    handleSizeChange(val) {
      this.param.pageSize = val;
      this.getTableData();
    },
    handleCurrentChange(val) {
      this.param.pageNo = val;
      this.getTableData();
    },
    search() {
      this.param.pageNo = 1;
      this.getTableData();
    },
    getTableData() {
      if (this.param.dateRange) {
        this.param.startDate = this.param.dateRange[0];
        this.param.endDate = this.param.dateRange[1];
      }
      this.$api.tradeforeign.pagingOrder(this.param).then(res => {
        this.tableList = res.data.list;
        this.total = res.data.total;
      });
    }
  },
  created() {
    this.getTableData();
  }
};
</script>

<style lang="scss" scoped>
.trade-order-manage {
  .table-action {
    .module-btn {
      display: inline-block;
    }
    .import-btn {
      float: right;
    }
  }
}
</style>